<link rel="stylesheet" href="/css/rank-index.css?v=9">
<div class="zong">
    <div class="jiangpin"></div>
    <div class="tap">
        <div class="tap-zong  tap-xuanzei">总排行</div>
        <div class="tap-zhou">周排行</div>
        <input type="hidden" id="type" value="0">
    </div>
    <div class="zomgp-list">
        <div class="title">总排行TOP 200名</div>
        <div class="list-con" id="zong_list">
            <?php if(!empty($this->score_list)){?>
                <?php foreach ($this->score_list as $k=>$v){?>
                    <?php if($v['score'] > 0){?>
                        <div class="one">
                            <div class="zuo">
                                <div class="zid"><?php echo $k+1?></div>
                                <div class="z-img">
                                    <img src="<?php echo $v['headimgurl']?>" alt="">
                                </div>
                                <div class="z-name"><?php echo $v['nickname']?></div>
                            </div>
                            <div class="z-number"><?php echo $v['score']?></div>
                        </div>
                    <?php }?>
                <?php }?>
            <?php }?>
        </div>
    </div>
</div>
<div class="zhgou">
    <div class="zh-jiangpin"></div>
    <div class="tap">
        <div class="tap-zong">总排行</div>
        <div class="tap-zhou  tap-xuanzei">周排行</div>
        <input type="hidden" id="type" value="0">
    </div>
    <?php  if($this->type == 5){?>
        <div class="empty_con">周排行榜单尚未公布~</div>
    <?php }else{?>
        <ul id="accordion" class="accordion">
            <li style="display: <?php echo $this->type < 5 ? 'block' : 'none'?>">
                <div class="link">6.14-6.21 TOP200 榜单</div>
                <ul class="submenu" id="week_one">
                    <div class="list-con" id="zhou_one">

                    </div>
                </ul>
            </li>
            <li  style="display: <?php echo $this->type < 4 ? 'block' : 'none'?>">
                <div class="link"><i class="fa fa-code"></i>6.21-6.28 TOP200 榜单<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu" id="week_two">
                    <div class="list-con" id="zhou_two">

                    </div>
                </ul>
            </li>
            <li style="display: <?php echo $this->type < 3 ? 'block' : 'none'?>">
                <div class="link"><i class="fa fa-code"></i>6.28-7.04 TOP200 榜单<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu"  id="week_three">
                    <div class="list-con" id="zhou_three">

                    </div>
                </ul>
            </li>
            <li style="display: <?php echo $this->type < 2 ? 'block' : 'none'?>">
                <div class="link"><i class="fa fa-code"></i>7.04-7.10 TOP200 榜单<i class="fa fa-chevron-down"></i></div>
                <ul class="submenu"  id="week_four">
                    <div class="list-con" id="zhou_four">

                    </div>
                </ul>
            </li>
        </ul>
    <?php }?>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/tj.js"></script>
<script>
    $('.tap-zong,.tap-zhou').on('click', function () {
        $('.tap-zong,.tap-zhou').removeClass('tap-xuanzei');
        $('.zhgou,.zong').css({'display': 'none'});
//        $(this).addClass('tap-xuanzei');
        if ($(this).attr('class').includes('tap-zhou')) {
            show_loading();
            setTimeout("close_locading()",500);
            $('.zhgou').css({'display': 'block'});
            $("#type").val(1);
            $('.tap-zhou').addClass('tap-xuanzei');
        } else if ($(this).attr('class').includes('tap-zong')) {
            show_loading();
            setTimeout("close_locading()",500);
            $('.zong').css({'display': 'block'});
            $("#type").val(0);
            $('.tap-zong').addClass('tap-xuanzei');
        }
    });
    $(function () {
        var Accordion = function (el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;
            // Variables privadas
            var links = this.el.find('.link');
            // Evento
            links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
        };
        Accordion.prototype.dropdown = function (e) {
            var $el = e.data.el;
            $this = $(this),
                $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');

            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            }
        };
        var accordion = new Accordion($('#accordion'), false);
    });
    $(function(){
        /*初始化*/
        var counter = 0; /*计数器*/
        var counter1 = 0;
        var counter2 = 0;
        var counter3 = 0;
        var counter4= 0;
        var pageStart = 0; /*offset*/
        var pageStart1 = 0;
        var pageStart2 = 0;
        var pageStart3= 0;
        var pageStart4 = 0;
        var pageSize = 5; /*size*/
        var isEnd = false;/*结束标志*/
        var isEnd1 = false;
        var isEnd2 = false;
        var isEnd3 = false;
        var isEnd4 = false;
        var isAjax = false;/*防止滚动过快，服务端没来得及响应造成多次请求*/
        var isAjax1 = false;
        var isAjax2 = false;
        var isAjax3 = false;
        var isAjax4 = false;
        var range = 500;
        var totalHeight=0;
        var type_flag = <?php echo $this->type;?>;

        /*周排行首次加载*/
        if(type_flag == 4){
            getData(pageStart1, pageSize,1,1)
        }else if(type_flag == 3){
            getData(pageStart1, pageSize,1,1);
            getData(pageStart2, pageSize,1,2);
        }else if(type_flag == 2){
            getData(pageStart1, pageSize,1,1);
            getData(pageStart2, pageSize,1,2);
            getData(pageStart3, pageSize,1,3);
        }else if(type_flag == 1){
            getData(pageStart1, pageSize,1,1);
            getData(pageStart2, pageSize,1,2);
            getData(pageStart3, pageSize,1,3);
            getData(pageStart4, pageSize,1,4);
        }

        //总排行加载
       /* $(window).scroll(function(){
            /!*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*!/
            if(isEnd == true || isAjax == true){
                return;
            }
            var scrollHeight = $(this).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && counter !== pageSize){
                counter ++;
                pageStart = counter * pageSize;
                getData(pageStart, pageSize,0);
            }
        });*/

        //第1周排行监听
        $('#week_one').scroll(function(){
            /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
            if(isEnd1 == true && isAjax1 == true){
                return;
            }
            // 当滚动到最底部以上60像素时， 加载新内容、
            var scrollHeight = $(this).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && counter1 !== pageSize){
                counter1 ++;
                pageStart1= counter1 * pageSize;
                getData(pageStart1, pageSize,1,1);
            }
        });
        //第2周排行监听
        $('#week_two').scroll(function(){
            /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
            if(isEnd2 == true && isAjax2 == true){
                return;
            }
            // 当滚动到最底部以上60像素时， 加载新内容、
            var scrollHeight = $(this).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && counter2 !== pageSize){
                counter2 ++;
                pageStart2 = counter2 * pageSize;
                getData(pageStart2, pageSize,1,2);
            }
        });
        //第3周排行监听
        $('#week_three').scroll(function(){
            /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
            if(isEnd3 == true && isAjax3 == true){
                return;
            }
            // 当滚动到最底部以上60像素时， 加载新内容、
            var scrollHeight = $(this).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && counter3 !== pageSize){
                counter3 ++;
                pageStart3 = counter3 * pageSize;
                getData(pageStart3, pageSize,1,3);
            }
        });
        //第4周排行监听
        $('#week_four').scroll(function(){
            /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
            if(isEnd4 == true && isAjax4 == true){
                return;
            }
            // 当滚动到最底部以上60像素时， 加载新内容、
            var scrollHeight = $(this).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && counter4 !== pageSize){
                counter4 ++;
                pageStart4 = counter4 * pageSize;
                getData(pageStart4, pageSize,1,4);
            }
        });
        //请求加载更多信息
        function getData(offset,size,type = '',week_type = ''){
            if(type == 0){
                isAjax = true;
            }else if(type == 1){
                if(week_type == 1){
                    isAjax1 = true;
                }else if(week_type == 2){
                    isAjax2 = true;
                }else if(week_type == 3){
                    isAjax3 = true;
                }else if(week_type == 4){
                    isAjax4 = true;
                }
            }
            var url = '';
            if(week_type !==''){
                 url = '/rank/get-rank'+ '?type='+type+'&week_type='+week_type+'&offset=' + offset + '&size=' + size;
            }else{
                 url = '/rank/get-rank'+ '?type=0&offset=' + offset + '&size=' + size;
            }
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                success: function(response){
                    if(type == 0){
                        isAjax = false;
                    }else if(type == 1){
                        if(week_type == 1){
                            isAjax1 = false;
                        }else if(week_type == 2){
                            isAjax2 = false;
                        }else if(week_type == 3){
                            isAjax3 = false;
                        }else if(week_type == 4){
                            isAjax4 = false;
                        }
                    }
                    var data = response.result.list;
                    var sum = response.result.list.length;
                    var result = '';
                    /************业务逻辑块：实现拼接html内容并append到页面*****************/
                    /*使用for循环模拟SQL里的limit(offset,size)*/
                    for(var i=0; i< sum; i++){
                        var j = offset +i+1;
                            result += '<div class="one">';
                            result += '<div class="zuo">';
                            result += '<div class="zid">'+j+'</div>';
                            result += '<div class="z-img">';
                            result += '<img src="'+data[i].headimgurl+'" alt="">';
                            result += '</div>';
                            result += '<div class="z-name">'+data[i].nickname+'</div>';
                            result += '</div>';
                            if(type == 0){
                                result += '<div class="z-number">'+data[i].score+'</div>';
                            }else if(type == 1){
                                if(week_type == 1){
                                    result += '<div class="z-number">'+data[i].one_week_score+'</div>';
                                }else if(week_type == 2){
                                    result += '<div class="z-number">'+data[i].two_week_score+'</div>';
                                }else if(week_type == 3){
                                    result += '<div class="z-number">'+data[i].three_week_score+'</div>';
                                }else if(week_type == 4){
                                    result += '<div class="z-number">'+data[i].four_week_score+'</div>';
                                }
                            }
                            result += '</div>';
                        }
                    if(type == 0){
                        $('#zong_list').append(result);
                    }else if(type == 1){
                        if(week_type == 1){
                            $('#zhou_one').append(result);
                        }else if(week_type == 2){
                            $('#zhou_two').append(result);
                        }else if(week_type == 3){
                            $('#zhou_three').append(result);
                        }else if(week_type == 4){
                            $('#zhou_four').append(result);
                        }
                    }

                    /*******************************************/
                    if ( (offset + size) >= sum){
                        if(type == 0) {
                            isEnd = true;
                        }else if(type == 1){
                            if(week_type == 1){
                                isEnd1 = true;
                            }else if(week_type == 2){
                                isEnd2 = true;
                            }else if(week_type == 3){
                                isEnd3 = true;
                            }else if(week_type == 4){
                                isEnd4 = true;
                            }
                        }
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                }
            });
        }
    });
</script>
